import isFunction from "./isFunction";
import isFunctionComponent from "./isFunctionComponent";
import mountNativeElement from "./mountNativeElement";

export default function mountComponent(virtualDOM,container,oldDOM){
    // 渲染组件  需要区分类组件和函数组件 内部实现不一样的 => 判断原型上是否存在render函数 存在即为类组件
    let nextVirtualDom = null
    let component = null
    if(isFunctionComponent(virtualDOM)){
        // 函数组件
        nextVirtualDom = buildFunctionComponent(virtualDOM)
    } else {
        // 类组件
        nextVirtualDom = buildClassComponent(virtualDOM)
        component = nextVirtualDom.component
    }
    if(isFunction(nextVirtualDom)){
        mountComponent(nextVirtualDom,container,oldDOM)
    } else {
        mountNativeElement(nextVirtualDom,container,oldDOM)
    }

    // 组件的ref挂载
    // ref是挂载到组件实例对象上
    if(component){
        component.componentDidUpdate()
        if(component.props&&component.props.ref){
            component.props.ref(component)
        }
    }
}

function buildFunctionComponent(virtualDOM){
    // virtualDOM.props 上记录着该函数组件上的一切属性
    return virtualDOM.type(virtualDOM.props || {})
}

function buildClassComponent(virtualDOM){
    // type即保存的是类组件的构造函数 通过new实例化后可以得到组件的实例对象
    const component = new virtualDOM.type(virtualDOM.props || {})
    // 调用实例对象上的render函数得到返回的VirtualDOM
    const nextVirtualDom = component.render()

    nextVirtualDom.component = component
    return nextVirtualDom
}